/*
  ts全称是TypeScript，不是一门新的语言。
  ts是js的超集
  理解为ts就是一个强类型版的js

  ts有了类型推断，增强代码的健壮性，不容易出错
  ts更适合做一些大型的项目

  ts有编写时报错，js是执行的时候报错


  ts是不能被浏览器识别的，需要转成js才能在浏览器运行
  比如vue的脚手架是会帮我们编译的，不在脚手架的环境下，需要手动编译

  1. 全局安装ts
    cnpm i typescript -g

  2. 编译
    tsc ./src/index.ts --outFile ./dist/index.js

  3. 实时编译
    tsc --init
    tsc --watch
    29 "rootDir": "./src", 
    60 "outDir": "./dist", 
*/

// 定义字符串
// 定义了一个变量的数据类型以后，就不能再将这个变量赋值成其他的数据类型
// 有编写时报错
let str:string = "hello";
let str2:string;
str2 = "world";
// ts是由自动类型推断
let str3 = "abc"; // string

// 定义数字
let num1:number = 10;
num1 = 20;

// 定义布尔值
let done:boolean = true;
done = false;

// 定义undefined
// undefined这个类型只有undefined这一个值
let udf: undefined = undefined;

// 定义null
// null这个类型只有null这一个值
let nl: null = null;

// 联合类型(或)
let a: number | string | boolean = 3;
a = "hello";
a = true;

// 任意类型
// any表示任意类型，可以随便改
let b: any = 3;
b = [1,2,3];

// 将一个字符串的值作为类型
const str4: "hello" = "hello";

// const token: string | null = localStorage.getItem("token");
// token && token.split("");
// token?.split("");
// if (token) {
//   token.split("");
// }



// 数组类型
// 数组的类型要精确到数组里的每一项
let arr: number[] = [1,2,3,4,5];
let arr2: (number | string)[] = [1,2,3,4,5];
arr2.push("9");
let arr3: string[] = ["1","2","3"];

let arr4: Array<number> = [1,2,3,4,5]; // 泛型的写法


// 元组类型(ts对数组类型的补充)
// 需要规定数组的长度，并且要规定数组里面的每一项的类型
let arr5: [string, boolean] = ["hello", true];
// arr5[0] = 10
// arr5 = arr5.concat(111);



// 对象类型
// 对象的类型需要添加接口
interface ObjType {
  name: string;
  age: number;
  fn: () => void;
  sex?: number; // ?表示可选属性，可以有也可以没有
}
let obj: ObjType = {
  name: "zhangsan",
  age: 20,
  fn: function() {},
}
obj.sex = 1;


interface Obj2Type {
  nm: string | string[];
  id: number;
  img: string;
  [propname: string]: any; // 索引签名, 只关心上面的属性的类型对不对，其他的不关心
}
let obj2 = {
  "bingeWatch": 0,
  "boxInfo": "上映28天，累计票房64942万",
  "cat": "动作,科幻,惊悚",
  "civilPubSt": 0,
  "comingTitle": "10月23日 周三",
  "desc": "主演:汤姆·哈迪,贾冰,切瓦特·埃加福特",
  "dir": "凯莉·马塞尔",
  "dur": 109,
  "effectShowNum": 0,
  "followst": 0,
  "fra": "美国,韩国,中国香港",
  "frt": "2024-10-25 00:00:00,2024-10-23 00:00:00,2024-10-23 00:00:00",
  "globalReleased": true,
  "haspromotionTag": false,
  "headLineShow": false,
  "id": 1448719,
  "img": "https://p0.pipi.cn/basicdata/54ecde517e192357e2b53559302950e08e4c1.jpg?imageMogr2/thumbnail/2500x2500%3E",
  "isRevival": false,
  "late": false,
  "localPubSt": 0,
  "mark": false,
  "mk": 8.8,
  "movieType": 0,
  "nm": "毒液：最后一舞",
  "pn": 8,
  "preSale": 0,
  "preShow": false,
  "proScore": 0.0,
  "proScoreNum": 0,
  "pubDate": 1729612800000,
  "pubDesc": "2024-10-23 09:00中国大陆上映",
  "pubShowNum": 0,
  "recentShowDate": 1731945600000,
  "recentShowNum": 0,
  "rt": "2024-10-23",
  "sc": 8.8,
  "scm": "",
  "scoreLabel": "猫眼购票评分",
  "showCinemaNum": 233,
  "showInfo": "今天233家影院放映1156场",
  "showNum": 1156,
  "showStateButton": {
      "color": "#F03D37",
      "content": "购票",
      "onlyPreShow": false
  },
  "showTimeInfo": "2024-10-23上映",
  "showst": 3,
  "snum": 114988,
  "src": "美国",
  "star": "汤姆·哈迪,贾冰,切瓦特·埃加福特",
  "totalShowNum": 2767,
  "ver": "IMAX 3D/IMAX 2D/杜比影院 3D/杜比影院 2D/中国巨幕3D/中国巨幕2D/CINITY 3D/CINITY 2D/3D/2D",
  "videoId": 506132,
  "videoName": "《毒液：最后一舞》今日上映 新水墨动画上演百变毒液见证终章",
  "videourl": "https://vod.pipi.cn/fec9203cvodtransbj1251246104/b40735381397757895972901262/v.f42905.mp4",
  "vnum": 12,
  "vodPlay": false,
  "wish": 634455,
  "wishst": 0
}
// console.log(obj2.nm);
// console.log(obj2.id);
// console.log(obj2.img);
obj2.nm.split("");


// let obj3 = {
//   a: 1 as number,
//   b: "hello" as string
// }
// let obj4 = {
//   a: 1,
//   b: "hello",
// } as {
//   a: number,
//   b: string
// }


interface ItemType {
  id: number;
  name: string;
  sex?: number;
}
let arr6: ItemType[] = [
  {
    id: 1,
    name: "zhangsan"
  },
  {
    id: 2,
    name: "lisi",
    sex: 1,
  }
]

interface Obj5type {
  name: string;
  age: number;
  likes: string[];
}
let obj5 = {
  name: "zhangsan",
  age: 20,
  likes: ["sing", "dance"]
}


interface Obj6Type {
  name: string;
  age: number;
  children?: Obj6Type[]
}
let obj6: Obj6Type = {
  name: "zhangsan",
  age: 20,
  children: [
    {
      name: "zhangsi",
      age: 10,
      children: [
        {
          name: "zhangliu",
          age: 3,
          children: [
            {
              name: "zhangqi",
              age: 1
            }
          ]
        }
      ]
    },
    {
      name: "zhangwu",
      age: 8
    }
  ]
}



// 枚举类型(ts对对象类型的补充)
// 枚举就是可以通过key找value，也可以通过value找到key的对象
enum Color {
  Red = 10,
  Green = 15,
  Blue = 20,
}
let gn = Color.Green;
console.log(gn); // 15
let bl = Color[20];
console.log(bl);



// 函数类型
// 函数不需要写类型，只需要写函数返回值的类型
function fn(): number {
  return 123
}
// 函数没有返回值，需要给返回值加void类型
function fn1(): void {
  console.log(123);
}
// 函数参数是没有自动类型推断的
// 参数也可以加问号，表示可选参数
function fn2(a: number, b: string, c?: string): string {
  return a + b;
}
fn2(3, "4");



// () => number作为整体表示函数类型
const fn3: () => number = (): number => {
  return 123
}
// 当函数死循环或者报错，返回never类型
const fn4 = (): never => {
  while(true) {}
}
const fn5 = (): number | never => {
  try {
    return 123
  } catch (error: any) {
    throw new Error(error)
  }
}



// 泛型类型
// 函数的扩展
function fn6<T>(x: T, y: T) {
  return 999;
}
fn6<number>(3, 4);
fn6<string>("3", "4");






// const count = ref<number>(10);
// const doubleCount = computed<number>(() => {
//   return count.value * 2
// })





